<template>
	<view class="content">
		<view class="userinfo">
			<view class="fl">
				<image src="../../../static/process-flow/meetinginfo_11.png" mode=""></image>
				<view>
					<text class="name">{{ appName || "" }}</text>
					<text class="des">{{ username || "" }}</text>
				</view>
			</view>
			<view
				:class="{
					tip: true,
					ywc: info._castle_approve_status == 2,
					ycx: info._castle_approve_status == 4,
					ybh: info._castle_approve_status == 3,
				}"
			>
				{{ displayStatusName(info._castle_approve_status) }}
			</view>
		</view>
		<view class="main_box">
			<view class="label">
				<text class="name">待审批内容</text>
				<text decode="des">{{ info.approval_number }}</text>
				<div class="form-content">
					<div class="forms" v-for="item in forms.fields" :key="item.__config__.formId">
						<vDivider :text="item.__config__.label" :position="item.__config__.position" v-if="item.__config__.tag === 'el-divider'"></vDivider>
						<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'span'" :required="item.__config__.required">
							<div class="span">{{ item.__config__.defaultValue }}</div>
						</vFormItem>
						<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'el-input'" :inline="item.type === 'textarea' || item.__slot__.prepend.length > 3 || item.__config__.label.length > 4" :required="item.__config__.required" :showLabel="item.__config__.showLabel">
							<vInput v-if="item.type === 'textarea'" type="textarea" v-model="item.__config__.defaultValue" readonly :disabled="true" :placeholder="item.placeholder" :maxlength="item.maxlength" :rows="item.autosize" :showLimit="item['show-word-limit']">
								<template #prepend>
									{{ item.__slot__ ? item.__slot__.prepend : "" }}
								</template>
								<template #append>
									{{ item.__slot__ ? item.__slot__.append : "" }}
								</template>
							</vInput>
							<vInput v-else-if="item['show-password']" type="password" v-model="item.__config__.defaultValue" readonly :disabled="item.disabled" :placeholder="item.placeholder" :maxlength="item.maxlength" :clearable="item.clearable" :prepend="item.__slot__.prepend" :append="item.__slot__.append">
								<template #prepend>
									{{ item.__slot__ ? item.__slot__.prepend : "" }}
								</template>
								<template #append>
									{{ item.__slot__ ? item.__slot__.append : "" }}
								</template>
							</vInput>
							<vInput v-else type="text" v-model="item.__config__.defaultValue" readonly :disabled="item.disabled" :placeholder="item.placeholder" :maxlength="item.maxlength" :clearable="item.clearable" :prepend="item.__slot__.prepend" :append="item.__slot__.append">
								<template #prepend>
									{{ item.__slot__ ? item.__slot__.prepend : "" }}
								</template>
								<template #append>
									{{ item.__slot__ ? item.__slot__.append : "" }}
								</template>
							</vInput>
						</vFormItem>
						<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'el-switch'" :required="item.__config__.required" :showLabel="item.__config__.showLabel">
							<vSwitch v-model="item.__config__.defaultValue" :activeColor="item['active-color']" :inactiveColor="item['inactive-color']" :activeValue="item['active-value']" :inactiveValue="item['inactive-value']" :disabled="true">
								<template #inactiveText>
									{{ item["inactive-text"] ? item["inactive-text"] : "" }}
								</template>
								<template #activeText>
									{{ item["active-text"] ? item["active-text"] : "" }}
								</template>
							</vSwitch>
						</vFormItem>
						<vFormItem :inline="item.__slot__.options.length >= 3 || item.__config__.label.length > 4" :label="item.__config__.label" v-else-if="item.__config__.tag === 'el-checkbox-group'" :required="item.__config__.required" :showLabel="item.__config__.showLabel">
							<vCheckbox v-model="item.__config__.defaultValue" :options="item.__slot__.options" :disabled="true" :optionType="item.__config__.optionType" :size="item.size" :min="item.min" :max="item.max"></vCheckbox>
						</vFormItem>
						<vFormItem :inline="item.__slot__.options.length >= 3 || item.__config__.label.length > 4" :label="item.__config__.label" v-else-if="item.__config__.tag === 'el-radio-group'" :required="item.__config__.required" :showLabel="item.__config__.showLabel">
							<vRadio v-model="item.__config__.defaultValue" :options="item.__slot__.options" :disabled="true" :optionType="item.__config__.optionType" :size="item.size"></vRadio>
						</vFormItem>
						<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'el-slider'" :required="item.__config__.required" :inline="item.__config__.label.length > 4" :showLabel="item.__config__.showLabel">
							<vRangeSlider v-if="item.range" v-model="item.__config__.defaultValue" :disabled="true" :min="item.min" :max="item.max" :step="item.step"></vRangeSlider>
							<vSlider v-else v-model="item.__config__.defaultValue" :disabled="true" :min="item.min" :max="item.max" :step="item.step"></vSlider>
						</vFormItem>
						<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'el-rate'" :required="item.__config__.required" :inline="item.max > 10 || item.__config__.label.length > 4" :showLabel="item.__config__.showLabel">
							<vRate v-model="item.__config__.defaultValue" :disabled="item.disabled" :max="item.max" :half="item['allow-half']" :showText="item['show-text']" :showScore="item['show-score']" :readonly="true"></vRate>
						</vFormItem>
						<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'el-date-picker'" :required="item.__config__.required" :showLabel="item.__config__.showLabel">
							<vDatePicker v-if="item.type === 'date'" v-model="item.__config__.defaultValue" :disabled="item.disabled" :clearable="false" :format="item['value-format'] || item.format" :readonly="true" type="date" :placeholder="item.placeholder"></vDatePicker>
							<vDatePicker
								v-else-if="item.type === 'daterange'"
								v-model="item.__config__.defaultValue"
								:disabled="item.disabled"
								:clearable="false"
								:format="item['value-format'] || item.format"
								:readonly="true"
								:placeholder="item.placeholder"
								:rangeSeparator="item['range-separator']"
								:startPlaceholder="item['start-placeholder']"
								:endPlaceholder="item['end-placeholder']"
								type="daterange"
							></vDatePicker>
							<vDatePicker
								v-else-if="item.type === 'datetimerange'"
								v-model="item.__config__.defaultValue"
								:disabled="item.disabled"
								:clearable="false"
								:format="item['value-format'] || item.format"
								:readonly="true"
								:placeholder="item.placeholder"
								:rangeSeparator="item['range-separator']"
								:startPlaceholder="item['start-placeholder']"
								:endPlaceholder="item['end-placeholder']"
								type="datetimerange"
							></vDatePicker>
							<vDatePicker v-else-if="item.type === 'datetime'" v-model="item.__config__.defaultValue" :disabled="item.disabled" :clearable="false" :format="item['value-format'] || item.format" :readonly="true" type="datetime" :placeholder="item.placeholder"></vDatePicker>
							<vDatePicker v-else-if="item.type === 'month'" v-model="item.__config__.defaultValue" :disabled="item.disabled" :clearable="false" :format="item['value-format'] || item.format" :readonly="true" type="month" :placeholder="item.placeholder"></vDatePicker>
							<vDatePicker v-else-if="item.type === 'year'" v-model="item.__config__.defaultValue" :disabled="item.disabled" :clearable="false" :format="item['value-format'] || item.format" :readonly="true" type="year" :placeholder="item.placeholder"></vDatePicker>
							<vDatePicker v-else-if="item.type === 'week'" v-model="item.__config__.defaultValue" :disabled="item.disabled" :clearable="false" :format="item['value-format'] || item.format" :readonly="true" type="week" :placeholder="item.placeholder"></vDatePicker>
						</vFormItem>

						<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'el-time-picker'" :required="item.__config__.required" :inline="item.__config__.label.length > 4" :showLabel="item.__config__.showLabel">
							<vTimePicker v-if="item['is-range']" v-model="item.__config__.defaultValue" :disabled="true" :type="'timeRange'" :format="item['value-format'] || item.format" :clearable="item.clearable" :startPlaceholder="item['start-placeholder']" :endPlaceholder="item['end-placeholder']" :separator="item['range-separator']" :readonly="true"></vTimePicker>

							<vTimePicker v-else v-model="item.__config__.defaultValue" :disabled="true" :placeholder="item.placeholder" :type="'time'" :selectable="item['picker-options']" :format="item['value-format'] || item.format" :clearable="item.clearable" :readonly="true"></vTimePicker>
						</vFormItem>

						<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'el-input-number'" :required="item.__config__.required" :showLabel="item.__config__.showLabel">
							<vNumberBox readonly v-model="item.__config__.defaultValue" :disabled="item.disabled" :min="item.min" :max="item.max" :step="item.step" :strictly="item['step-strictly']" :position="item['controls-position']" :precision="item.precision" :placeholder="item.placeholder"></vNumberBox>
						</vFormItem>
						<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'el-color-picker'" :required="item.__config__.required" :showLabel="item.__config__.showLabel">
							<vColorPicker v-model="item.__config__.defaultValue" :colorFormat="item['color-format']" :measure="item.size" :disabled="true"></vColorPicker>
						</vFormItem>
						<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'el-select'" :required="item.__config__.required" :inline="item.__config__.label.length > 4" :showLabel="item.__config__.showLabel">
							<vSelect readonly v-model="item.__config__.defaultValue" :disabled="true" :list="item.__slot__.options" :placeholder="item.placeholder" :multiple="item.multiple" :filterable="item.filterable"></vSelect>
						</vFormItem>
						<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'el-cascader'" :required="item.__config__.required" :inline="item.__config__.label.length > 4" :showLabel="item.__config__.showLabel">
							<vCascadeSelect readonly v-model="item.__config__.defaultValue" :disabled="true" :list="item.options" :placeholder="item.placeholder" :filterable="item.filterable" :separator="item.separator"></vCascadeSelect>
						</vFormItem>
						<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'image-upload'" :required="item.__config__.required" :inline="item.__config__.label.length > 4" :showLabel="item.__config__.showLabel">
							<vUpload v-model="item.__config__.defaultValue" :disabled="true" :readOnly="true" :showTip="item.__config__.showTip" :max="item.__config__.limit" @change="onUploadcardType" type="image" :fileSize="item.__config__.fileSize" :multiple="item.multiple"></vUpload>
						</vFormItem>
						<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'video-upload'" :required="item.__config__.required" :inline="item.__config__.label.length > 4" :showLabel="item.__config__.showLabel">
							<vUpload v-model="item.__config__.defaultValue" :disabled="true" :readOnly="true" :showTip="item.__config__.showTip" :max="item.__config__.limit" @change="onUploadvideo" type="video" :fileSize="item.__config__.fileSize"></vUpload>
						</vFormItem>
						<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'file-upload'" :required="item.__config__.required" :inline="item.__config__.label.length > 4" :showLabel="item.__config__.showLabel">
							<vUpload v-model="item.__config__.defaultValue" :disabled="item.disabled" :showTip="item.__config__.showTip" :max="item.__config__.limit" @change="onUploadfile" type="file" :isDownload="true" :delbtn="false" :fileSize="item.__config__.fileSize" readOnly></vUpload>
						</vFormItem>
						<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'fortress-region'" :required="item.__config__.required" :inline="item.__config__.label.length > 4" :showLabel="item.__config__.showLabel">
							<vRegion v-model="item.__config__.defaultValue" :disabled="item.disabled" :delbtn="true" type="2"></vRegion>
						</vFormItem>
						<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'phone_sms'" :required="item.__config__.required" :inline="item.__config__.label.length > 4" :showLabel="item.__config__.showLabel" :code="item.__vModel__">
							<vGetCode v-model="item.__config__.defaultValue" @change="changeCode" :second="item.intervalSecond" :validMinutes="item.validityMinute" @time="getTime"></vGetCode>
						</vFormItem>
					</div>
				</div>
			</view>
			<div class="label" v-if="csType === '01'">
				<text class="name">自选抄送人</text>
				<v-auditer v-model="nodeAppId" multiple authFlag="00"></v-auditer>
			</div>
			<view class="label">
				<text class="name">审批流程</text>
				<view class="list">
					<view class="items" v-for="item in holidayHistoryNodes" :key="item.nodeId">
						<view class="child">
							<view class="fl">
								<view class="pic">
									<image src="../../../static/process-flow/tzs_03.jpg" mode="widthFix" class="p"></image>
								</view>
								<view class="grow">
									<text class="name">
										{{ item.nodeName }}
										<span class="nodeDesc" v-if="item.nodeTypeName === 'SP'">{{ item.nodeDesc }} {{ item.approveType || "" }}</span>
										{{ item.nodeTypeName === "CS" ? `-已抄送${item.users.length}人` : "" }}
									</text>
									<view :class="['uu', { cs: item.nodeTypeName === 'CS' }]">
										<template v-if="item.user && formatUserId(item)">
											<view class="group">
												<image src="../../../static/process-flow/meetinginfo_11.png" mode="widthFix"></image>
												<text>{{ item.user.realName }}</text>
												<div
													:class="{
														agree: true,
														ytg: item.user.approveStatus == '02',
														ybh: item.user.approveStatus == '03',
														dsh: item.user.approveStatus == '00' || item.user.approveStatus == '01',
													}"
												>
													{{ displayNodeStatus(item.user.approveStatus) }}
												</div>
												<div class="agree">
													{{ item.user.approveOpinion }}
												</div>
												<div class="date" v-if="item.user.approveDate">
													{{ item.user.approveDate }}
												</div>
												<div class="attachments" v-if="item.user.file || item.user.image" @click="checkAttachments(item.user)">查看附件</div>
											</view>
										</template>
										<template v-if="item.users && item.users.length">
											<template v-for="user in item.users">
												<view class="group" :key="user.id">
													<image src="../../../static/process-flow/meetinginfo_11.png" mode="widthFix"></image>
													<text>{{ user.realName }}</text>
													<div
														:class="{
															agree: true,
															ytg: user.approveStatus == '02',
															ybh: user.approveStatus == '03',
															dsh: user.approveStatus == '00' || user.approveStatus == '01',
														}"
													>
														{{ displayNodeStatus(user.approveStatus) }}
													</div>
													<div class="agree">
														{{ user.approveOpinion }}
													</div>
													<div class="date" v-if="user.approveDate">
														{{ user.approveDate }}
													</div>
													<div class="attachments" v-if="user.file || user.image" @click="checkAttachments(user)">查看附件</div>
												</view>
											</template>
										</template>
										<template v-if="item.userGroup && item.userGroup.length">
											<template v-for="(group, index) in item.userGroup">
												<div class="group" :key="index">
													<div>
														<!-- <div class="title">{{ index + 1 }}级主管</div> -->
														<div v-for="child in group" :key="child.id">
															<view class="group-main" v-if="child">
																<div class="message">
																	<image src="../../../static/process-flow/meetinginfo_11.png" mode="widthFix"></image>
																	<text>{{ child.realName }}</text>
																</div>
																<div
																	:class="{
																		agree: true,
																		ytg: child.approveStatus == '02',
																		ybh: child.approveStatus == '03',
																		dsh: child.approveStatus == '00' || child.approveStatus == '01',
																	}"
																	:key="group.id + 'status'"
																>
																	{{ displayNodeStatus(child.approveStatus) }}
																</div>
																<div class="agree" :key="group.id + 'agree'">
																	{{ child.approveOpinion }}
																</div>
																<div class="date" v-if="child.approveDate">
																	{{ child.approveDate }}
																</div>
																<div class="attachments" v-if="child.file || child.image" @click="checkAttachments(child)">查看附件</div>
															</view>
														</div>
													</div>
												</div>
											</template>
										</template>

										<!-- <template v-if="item.nodeId == nodeAppId && thisNodeAppoint">
											<div class="check">
												<template v-for="(user, indexs) in check">
													<view class="group" :key="user.id" v-if="user && formatUserId(user)">
														<image src="../../../static/process-flow/meetinginfo_11.png" mode="widthFix"></image>
														<text>{{ user.name }}</text>
														<div class="delete-icon" @click="onDeleteCheck(indexs)"></div>
													</view>
												</template>
											</div>
											<image @click="toPage('/pages/architecture?dept=0&check=' + check.map(item => item.id).join())" src="/static/addmeeting_18.png" mode="widthFix" class="addbtn"></image>
										</template> -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="showButton" style="height: 160rpx"></view>
		<view class="buttons" v-if="showButton">
			<div @click="show = true" class="option">
				<div class="turn-down padding" @click="approveStatus = 2">驳回</div>
				<div class="on padding" @click="approveStatus = 1">通过</div>
			</div>
			<view class="weipai padding" @click="otherBtns">其他</view>
			<!-- <view class="weipai padding" @click="weipaiFn">委派</view> -->
		</view>

		<u-popup v-model="show" mode="center" border-radius="14">
			<view class="fadein">
				<text class="title">审批回复</text>
				<text class="des">审批意见将通知给申请人</text>
				<textarea placeholder="内容（选填）" v-model="approveOpinion" placeholder-class="s"></textarea>
				<vFormItem label="审批意见图片" :inline="true">
					<vUpload v-model="approveOpinionImage" :max="9" type="image" :fileSize="10" :multiple="true" @change="changeApproveOpinionImage"></vUpload>
				</vFormItem>
				<vFormItem label="审批意见文件" :inline="true">
					<vUpload v-model="approveOpinionFile" :max="9" type="file" :fileSize="10" @change="changeApproveOpinionFile"></vUpload>
				</vFormItem>
				<view class="button">
					<view @click="show = false">取消</view>
					<view class="on" @click="submitCheck()">确定</view>
				</view>
			</view>
		</u-popup>
		<!-- 委派 -->
		<u-popup v-model="appointShow" mode="center" border-radius="14" width="500rpx" :mask-close-able="false">
			<div class="popup">
				<u-form label-width="120">
					<u-form-item label="加签方式">
						<u-radio-group v-model="positionType" width="50%">
							<u-radio name="pre" style="transform: scale(0.8)">前加签</u-radio>
							<u-radio name="next" style="transform: scale(0.8)">后加签</u-radio>
						</u-radio-group>
					</u-form-item>
				</u-form>
				<div style="margin-bottom: 20rpx">
					<div class="title">委派</div>
					<div>请选择您要委派的人员</div>
				</div>
				<v-auditer multiple ref="auditerRef" authFlag="00" @on-confirm="auditerConfirm"></v-auditer>
				<u-form>
					<u-form-item label="方式" v-if="checkList.length > 1">
						<u-radio-group v-model="delegateType">
							<u-radio name="00" style="transform: scale(0.8)">会签</u-radio>
							<u-radio name="01" style="transform: scale(0.8)">或签</u-radio>
						</u-radio-group>
						<!-- <u-radio lable="00" v-model="delegateType">会签</u-radio>
						<u-radio label="01" v-model="delegateType">或签</u-radio> -->
					</u-form-item>
				</u-form>

				<div class="footer">
					<div class="cancel" @click="onAppointCancel">取消</div>
					<div class="confirm" @click="onAppointConfirm">确定</div>
				</div>
			</div>
		</u-popup>
		<!-- 附件 -->
		<u-popup v-model="attachmentsShow" mode="center" border-radius="14" width="500rpx">
			<div class="popup">
				<div class="title">
					查看附件
					<u-icon name="close" color="#ccc" @click="onPreviewFileClose"></u-icon>
				</div>
				<div class="attachment-image" v-for="(item, index) in attachmentsImageList" :key="index">
					<image class="image" mode="aspectFill" :src="item" @click="preview(item)"></image>
				</div>
				<div class="attachment-file" v-for="item in attachmentsFileList" :key="item.uid">
					<div class="file" @click="onPreviewFile(item)">{{ item.name }}</div>
				</div>
			</div>
		</u-popup>

		<!-- 转办 -->
		<u-popup v-model="turntoShow" mode="center" border-radius="14" width="500rpx" :mask-close-able="false">
			<div class="popup">
				<div style="margin-bottom: 20rpx">
					<div class="title">转办</div>
					<div>请选择您要转办的人员</div>
				</div>
				<v-auditer ref="auditerRef" authFlag="00" @on-confirm="auditerConfirm"></v-auditer>
				<div class="footer">
					<div class="cancel" @click="onTurntoCancel">取消</div>
					<div class="confirm" @click="onTurntoConfirm">确定</div>
				</div>
			</div>
		</u-popup>

		<!-- 转办 -->
		<u-popup v-model="sendBackShow" mode="center" border-radius="14" width="500rpx" :mask-close-able="false">
			<div class="popup">
				<div style="margin-bottom: 20rpx">
					<div class="title">退回结果</div>
				</div>
				<div class="dom">
					<div class="title">节点名</div>
					<div class="item" v-for="item in senBackList" :key="item.value + '' + flag" @click="onSendBackItem(item)">
						{{ item.nodeName }}
						<u-icon name="checkbox-mark" v-if="item.checked" class="icon" color="#2979ff"></u-icon>
					</div>
				</div>
				<div class="footer">
					<div class="cancel" @click="onSendBackCancel">取消</div>
					<div class="confirm" @click="onSendBackConfirm">确定</div>
				</div>
			</div>
		</u-popup>
		<!-- 其他流程 -->
		<uni-popup ref="uniPopupRef">
			<div class="otherBtns">
				<view class="btn weipai" @click="weipaiFn">委派</view>
				<view class="btn weipai" @click="turnTo">转办</view>
				<view class="btn weipai" @click="toSpecifiedNode">回到指定节点</view>
				<view class="btn weipai" @click="endTheProcess">结束流程</view>
			</div>
		</uni-popup>
		<v-modal ref="vModalRef"></v-modal>
	</view>
</template>

<script>
import { infoApproves, completeTask, allParticipants, csOptional, approveStatus, flowFormInfo, delegateTask, region, turnTask, endTask, refuseBackList, refuseBack } from "@/uni/uni.js"
import VAuditer from "@/components/all-participants/auditer.vue"
import request from "@/uni/request"
import mixin from "@/mixin"
import vFormItem from "../../form/components/form-item.vue"
import vDivider from "@/components/divider/index.vue"
import vInput from "../../form/components/input.vue"
import vSwitch from "../../form/components/switch.vue"
import vCheckbox from "../../form/components/checkbox.vue"
import vRadio from "../../form/components/radio.vue"
import vSlider from "../../form/components/slider.vue"
import vRangeSlider from "../../form/components/range-slider.vue"
import vRate from "../../form/components/rate.vue"
import vDatePicker from "../../form/components/date-picker.vue"
import vNumberBox from "../../form/components/number-box.vue"
import vColorPicker from "../../form/components/color-picker.vue"
import vTimePicker from "../../form/components/time-picker.vue"
import vSelect from "../../form/components/select.vue"
import vCascadeSelect from "../../form/components/cascade-select.vue"
import vUpload from "../../form/components/upload/upload.vue"
import vRegion from "../../form/components/region.vue"
import vGetCode from "../../form/components/getCode.vue"
import vModal from "../../form/components/upload/modal.vue"

export default {
	mixins: [mixin],
	data() {
		return {
			actKey: "",
			showButton: false,
			approveOpinion: "",
			approveOpinionImage: "", //审批意见图片
			approveOpinionFile: "", //审批意见文件
			approveStatus: 1,
			tabbar: 1,
			show: false,
			info: {},
			taskId: "",
			images: [],
			id: "",
			tbId: "",
			processId: "",
			statusList: [],
			holidayHistoryNodes: [],
			holidayTypeList: [],
			currentUser: {},
			username: "",
			applyUserId: "",
			csType: "",
			thisNodeAppoint: "",
			sysUserId: "",
			// check: [],
			appName: "",
			status: "",
			// 表单
			forms: {
				fields: [],
			},
			selected: {
				dept: [],
				user: [],
			},
			appointShow: false,
			delegateType: "00", // 00 会签 01 或签
			positionType: "pre", // 前加签 pre 后加签 next
			checkList: [],
			attachmentsShow: false, //附件弹窗
			// attachmentsData: {}, //附件数据
			attachmentsImageList: [], //附件图片列表
			attachmentsFileList: [], //附件文件列表
			turntoShow: false,
			sendBackShow: false,
			senBackList: [],
			checkNode: "",
			flag: "",
		}
	},
	computed: {
		nodeAppId: {
			get() {
				return this.thisNodeAppoint.replace(/_cs$/, "")
			},
			set(val) {
				this.selected = {
					dept: [],
					user: val,
				}
			},
		},
		formData() {
			let delegateUsers = []
			let delegateOpinion = []

			this.checkList.forEach(item => {
				delegateUsers.push(item.id)
				delegateOpinion.push(item.name)
			})

			return {
				tid: this.tbId,
				id: this.id,
				task: this.taskId,
				delegateType: this.delegateType,
				delegateUsers: delegateUsers.join(),
				delegateOpinion: delegateOpinion.join(),
				positionType: this.positionType,
			}
		},
	},
	onLoad(pathVariables) {
		this.username = pathVariables.applyUserName || ""
		this.tbId = pathVariables.tbId
		this.id = pathVariables.id
		this.taskId = pathVariables.taskId
		this.processId = pathVariables.processId
		this.applyUserId = pathVariables.applyUserId
		this.tabbar = pathVariables.tabbar
		this.actKey = pathVariables.actKey
		this.appName = pathVariables.appName
		this.status = pathVariables.status
		if (this.tabbar == 1) {
			this.showButton = true
		}
		if (this.tabbar == 2) {
			this.showButton = false
		}

		// uni.$on("confirm", ({ check }) => {
		// 	this.check = check
		// })
	},
	onShow() {
		this.init()
	},
	onUnload() {
		uni.$off("confirm")
	},
	methods: {
		formatUserId(item) {
			if (item) {
				if (isNaN(+item.id)) {
					return true
				}
			}
			return false
		},
		preview(src) {
			uni.previewImage({
				urls: [src],
				longPressActions: {
					success: function (data) {},
					fail: function (err) {},
				},
			})
		},
		//		00 待审核 01 审核中 02 通过 03 驳回
		displayNodeStatus(status) {
			if (status == "00") {
				// status==7 结束流程  ==4 撤销申请  ==3 驳回
				if (this.info._castle_approve_status == "2" || this.info._castle_approve_status == "3" || this.info._castle_approve_status == "4" || this.info._castle_approve_status == "7") {
					return ""
				} else {
					return "待审核"
				}
			} else if (status == "01") {
				return "审核中"
			} else if (status == "02") {
				return "已通过"
			} else if (status == "03") {
				return "已驳回"
			} else {
				return "状态异常"
			}
		},
		displayStatusName(status) {
			let obj = this.statusList.find(item => {
				return item.code == status
			})

			return obj ? obj.name : "状态异常"
		},
		init() {
			if (this.tbId || this.id) {
				infoApproves({ tbId: this.tbId, id: this.id }).then(res => {
					this.info = res

					// this.images = this.info.holiday_photos.join(",").split("~")
					allParticipants({ pid: this.processId, engineVersion: this.info._castle_process_engine_version, actKey: this.actKey }).then(res => {
						this.holidayHistoryNodes = res
					})

					csOptional({ taskId: this.taskId, tid: this.tbId, id: this.id }).then(({ csType, thisNodeAppoint, sysUserId }) => {
						if (csType == "01") {
							this.csType = "01"
							this.thisNodeAppoint = thisNodeAppoint || ""
							this.sysUserId = sysUserId
							return
						}
						// this.thisNodeAppoint = thisNodeAppoint || ""
						// this.csType = csType
					})
					approveStatus().then(res => {
						this.statusList = res
					})
					flowFormInfo(this.tbId).then(res => {
						this.forms = JSON.parse(res.viewContent)
						// console.log(this.forms.fields, "forms")
						this.forms.fields.find(item => {
							if (item.__config__.tag === "span") {
								item.__config__.defaultValue = item.__config__.defaultValue
							} else if (item.__config__.tag === "el-time-picker" && !item["is-range"]) {
								item.__config__.defaultValue = this.info[item.__vModel__] ? this.info[item.__vModel__][0] : ""
							} else if (item.__config__.tag === "fortress-region") {
								item.__config__.defaultValue = this.info[item.__vModel__ + "Name"]
							} else {
								item.__config__.defaultValue = this.info[item.__vModel__]
							}
						})
					})
				})
			}

			// listHolidayType().then(res => {
			// 	this.holidayTypeList = res
			// })
		},
		submitCheck() {
			uni.showLoading({
				title: "提交中...",
				mask: true,
			})
			if (this.csType == "01") {
				const list = (this.sysUserId || []).split(",")
				this.csAppointValue = this.selected.user.filter(item => !list.includes(item)).join()
			}
			completeTask({
				approveStatus: this.approveStatus,
				approveOpinion: this.approveOpinion,
				tid: this.tbId,
				task: this.taskId,
				id: this.id,
				_castle_approve_status: this.info._castle_approve_status,
				_castle_approve_user: this.info._castle_approve_user,
				csAppointName: this.thisNodeAppoint,
				csAppointValue: this.csAppointValue,
				csType: this.csType,
				image: this.approveOpinionImage,
				file: Array.isArray(this.approveOpinionFile) ? JSON.stringify(this.approveOpinionFile) : this.approveOpinionFile,
			})
				.then(res => {
					uni.hideLoading()
					uni.showToast({
						title: "操作成功",
						icon: "success",
						duration: 2000,
					})
					setTimeout(function () {
						uni.switchTab({
							url: "/pages/flow/approved-by-me/index",
						})
					}, 500)
				})
				.catch(error => {
					uni.hideLoading()
					uni.showToast({
						title: error.data.msg || "网络异常",
						icon: "error",
						duration: 4000,
					})
				})
		},
		// 委派
		onRefresh() {
			this.selected = {
				dept: [],
				user: [],
			}
		},
		weipaiFn() {
			this.$refs.uniPopupRef.close()
			this.onRefresh()
			this.appointShow = true
		},
		auditerConfirm(returnValue, checkList) {
			this.checkList = checkList
			console.log(this.checkList, "checkList")
		},
		onAppointConfirm() {
			delegateTask(this.formData).then(res => {
				uni.showToast({
					title: "委派成功",
					icon: "none",
				})
				this.appointShow = false
				setTimeout(function () {
					uni.switchTab({
						url: "/pages/flow/approved-by-me/index",
					})
				}, 500)
			})
		},
		onAppointCancel() {
			this.checkList = []
			this.$refs.auditerRef.clearAll()
			this.appointShow = false
		},
		toPage(url) {
			uni.navigateTo({
				url: url,
			})
		},
		onDeleteCheck(index) {
			uni.showModal({
				title: "提示",
				content: "确定删除吗？",
				success: res => {
					if (res.confirm) {
						this.check.splice(index, 1)
					}
				},
			})
		},
		changeApproveOpinionImage(val) {
			this.approveOpinionImage = val.join()
		},
		changeApproveOpinionFile(val) {
			this.approveOpinionFile = val
		},

		// 查看附件
		checkAttachments(item) {
			// this.attachmentsData = item
			if (item.image.length > 0) {
				if (Array.isArray(item.image)) {
					this.attachmentsImageList = item.image
				} else {
					this.attachmentsImageList = item.image?.split(",")
				}
			}
			if (item.file.length > 0) {
				this.attachmentsFileList = JSON.parse(item.file)
			}

			this.attachmentsShow = true
		},
		onPreview(current) {
			uni.previewImage({
				current,
				urls: this.attachmentsImageList,
			})
		},
		onPreviewFile(item) {
			window.open(item.url)
		},
		onPreviewFileClose() {
			this.attachmentsShow = false
		},
		otherBtns() {
			this.$refs.uniPopupRef.open("bottom")
		},
		// 转办
		turnTo() {
			this.$refs.uniPopupRef.close()
			this.turntoShow = true
		},

		// 回到指定节点
		async toSpecifiedNode() {
			this.$refs.uniPopupRef.close()
			await this.getSenBackList()
			this.sendBackShow = !!this.senBackList.length
		},
		onSendBackItem(item) {
			item.checked = !item.checked
			this.checkNode = item.nodeId
			this.flag++
		},

		onSendBackCancel() {
			this.sendBackShow = false
			this.checkNode = ""
		},
		async onSendBackConfirm() {
			if (!this.checkNode) {
				uni.showToast({
					title: "请选择回退节点",
					icon: "none",
				})
				return
			}
			try {
				await this.backToNode()
				uni.showToast({
					title: "回退成功",
					icon: "none",
				})
				this.onSendBackCancel()
				setTimeout(function () {
					uni.switchTab({
						url: "/pages/flow/approved-by-me/index",
					})
				}, 500)
			} catch (error) {
				uni.showToast({
					title: error || "网络异常",
					icon: "error",
					duration: 4000,
				})
			}
		},
		getSenBackList() {
			return new Promise((resolve, reject) => {
				refuseBackList({
					tid: this.tbId,
					task: this.taskId,
					id: this.id,
					actKey: this.actKey,
					engineVersion: this.info._castle_process_engine_version,
					pid: this.processId,
				})
					.then(res => {
						this.senBackList = res || []
						console.log(this.senBackList, "this.senBackList")
						this.senBackList.forEach(item => {
							item.checked = false
						})
						if (!this.senBackList.length) {
							uni.showToast({
								title: "没有可回退的节点",
								icon: "none",
							})
						}
						resolve(res)
					})
					.catch(error => {
						reject(error)
					})
			})
		},
		backToNode() {
			return new Promise((resolve, reject) => {
				refuseBack({
					tid: this.tbId,
					task: this.taskId,
					id: this.id,
					actKey: this.actKey,
					engineVersion: this.info._castle_process_engine_version,
					pid: this.processId,
					nodeId: this.checkNode,
				})
					.then(res => {
						resolve(res)
					})
					.catch(error => {
						reject(error)
					})
			})
		},
		// 结束流程
		async endTheProcess() {
			this.$refs.uniPopupRef.close()
			try {
				const { next } = await this.$refs.vModalRef.show({
					title: "提示",
					content: "是否结束流程?",
					center: true,
				})
				endTask({
					tid: this.tbId,
					task: this.taskId,
					id: this.id,
					actKey: this.actKey,
					engineVersion: this.info._castle_process_engine_version,
					pid: this.processId,
				}).then(res => {
					setTimeout(function () {
						uni.switchTab({
							url: "/pages/flow/approved-by-me/index",
						})
					}, 500)
				})
				next()
			} catch (error) {}
		},
		onTurntoCancel() {
			this.checkList = []
			this.$refs.auditerRef.clearAll()
			this.turntoShow = false
		},
		onTurntoConfirm() {
			uni.showLoading({
				title: "转办中...",
				mask: true,
			})
			turnTask({
				tid: this.tbId,
				task: this.taskId,
				id: this.id,
				actKey: this.actKey,
				engineVersion: this.info._castle_process_engine_version,
				pid: this.processId,
				turnUser: this.checkList.map(item => item.id).join(),
			}).then(res => {
				uni.hideLoading()
				uni.showToast({
					title: "转办成功",
					icon: "none",
				})
				this.turntoShow = false
				setTimeout(function () {
					uni.switchTab({
						url: "/pages/flow/approved-by-me/index",
					})
				}, 500)
			})
		},
	},
	components: {
		vFormItem,
		vDivider,
		vInput,
		vSwitch,
		vCheckbox,
		vRadio,
		vSlider,
		vRate,
		vDatePicker,
		vNumberBox,
		vColorPicker,
		vTimePicker,
		vSelect,
		vCascadeSelect,
		vUpload,
		vRegion,
		vGetCode,
		vRangeSlider,
		VAuditer,
		vModal,
	},
}
</script>

<style lang="scss">
page {
	background-color: #f6f6f6;
}

.ytg {
	color: #0dba1e;
}

.ybh {
	color: red;
}

.dsh {
	color: skyblue;
}

.uu {
	overflow: hidden;

	&.cs {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	view {
		overflow: hidden;
		margin-top: 10rpx;
		margin-right: 15rpx;

		image {
			width: 49rpx;
			// margin: 0 auto;
			margin-bottom: 7rpx;
			flex: none;
		}

		text {
			display: block;
			font-size: 20rpx;
			color: #999999;
			// text-align: center;
		}
	}

	.group {
		width: 100%;
		position: relative;

		&:not(:last-child) {
			margin-bottom: 10rpx;
			padding-bottom: 10rpx;
			border-bottom: 1px solid #f5f5f5;
		}

		.date {
			font-size: 24rpx;
			color: #ccc;
		}
		.attachments {
			color: #4776ff;
		}
	}

	.check {
		//display: flex;
		//justify-content: flex-start;
		//align-items: flex-start;
		gap: 20rpx;
		flex-wrap: wrap;
		width: 100%;

		.group {
			width: 70rpx;
		}
	}

	.delete-icon {
		position: absolute;
		top: 0;
		right: 0;
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background: #f00;

		&::before,
		&::after {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			width: 50%;
			height: 1px;
			background: #fff;
			margin: auto;
		}

		&::before {
			transform: rotate(45deg);
		}

		&::after {
			transform: rotate(-45deg);
		}
	}

	.addbtn {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 15rpx;
		display: block;
	}
}

.form-content {
	// margin: 10rpx 20rpx 150rpx;
	margin: 10rpx 20rpx;
	background-color: #fff;
	border-radius: 15rpx;
}
.zhanwei {
	padding: 20rpx 25rpx;
	font-size: 30rpx;
}
.forms {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	.span {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		line-clamp: 2;
		-webkit-line-clamp: 1; //显示几行
	}
}

.fadein {
	overflow: hidden;
	width: 610rpx;
	padding: 40rpx 34rpx;

	.title {
		display: block;
		font-size: 33rpx;
		letter-spacing: 2rpx;
		color: #000000;
		font-weight: bold;
		margin-bottom: 15rpx;
	}

	.des {
		display: block;
		font-size: 30rpx;
		color: #666666;
	}

	.button {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 43rpx;

		view {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 260rpx;
			height: 80rpx;
			font-size: 27rpx;
			color: #4876ff;
			border: 1px solid #4876ff;
			letter-spacing: 2rpx;
			border-radius: 10rpx;

			&.on {
				background-color: #4876ff;
				border: none;
				color: #fff;
			}
		}
	}

	textarea {
		width: 100%;
		height: 200rpx;
		background: #f5f7f9;
		border-radius: 10rpx;
		margin-top: 24rpx;
		padding: 30rpx;
		font-size: 27rpx;
		color: #333;
	}

	.s {
		stop-color: #999999;
	}

	.user {
		display: flex;
		align-items: center;

		image {
			width: 83rpx;
			margin-right: 14rpx;
		}

		text {
			font-size: 29rpx;
			color: #000000;
		}
	}
}

.buttons {
	z-index: 9;
	overflow: hidden;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 20rpx;
	// justify-content: space-between;
	background-color: #f1f0f5;
	position: fixed;
	left: 0;
	bottom: 0;
	height: 174rpx;
	padding: 0 32rpx;
	font-size: 33rpx;
	text-align: center;
	.option {
		display: flex;
		align-items: center;
		border-radius: 6rpx;
		color: #000000;
		gap: 20rpx;
		flex: 2;

		.turn-down {
			flex: 1;
			background-color: #fff;
			border: 1px solid #ededf0;
		}
		.on {
			flex: 1;
			background-color: #4776ff;
			color: #fff;
			border: none;
		}
	}
	.weipai {
		flex: 1;
		background-color: #4776ff;
		color: #fff;
		border: none;
	}
	.padding {
		border-radius: 10rpx;
		padding: 20rpx 0;
	}
}

.content {
	overflow: hidden;
	width: 100%;
	min-height: 100vh;

	.main_box {
		overflow: hidden;
		width: 100%;
		background-color: #fff;
		margin-top: 24rpx;
		padding: 0 32rpx;

		.label {
			overflow: hidden;
			margin-top: 30rpx;

			.fj {
				overflow: hidden;
				width: 100%;
				height: 102rpx;
				display: flex;
				align-items: center;
				border-radius: 10rpx;
				margin-top: 20rpx;
				border: 1px solid #e8e8e8;
				padding-left: 20rpx;

				image {
					width: 70rpx;
					border-radius: 6rpx;
				}

				view {
					margin-left: 30rpx;

					.f {
						display: block;
						font-size: 26rpx;
						color: #000000;
						margin-bottom: 10rpx;
					}

					.dess {
						display: block;
						font-size: 22rpx;
						color: #999999;
					}
				}
			}

			.addbox {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				image {
					width: 140rpx;
					margin-right: 16rpx;
				}
			}

			.name {
				display: block;
				font-size: 27rpx;
				color: #777777;
				margin-bottom: 18rpx;
			}

			.des {
				display: block;
				font-size: 33rpx;
				color: #000000;
			}

			.list {
				overflow: hidden;
				margin-top: 32rpx;
				padding-bottom: 32rpx;

				.items {
					width: 100%;
					position: relative;
					min-height: 178rpx;

					.dadd {
						width: 590rpx;
						display: block;
						margin-top: 8rpx;
						font-size: 27rpx;
						color: #999999;
						margin-left: calc(100% - 590rpx);
					}

					.hf {
						width: 590rpx;
						padding: 20rpx;
						border-radius: 6rpx;
						display: block;
						margin-top: 21rpx;
						background-color: #f6f6f6;
						font-size: 27rpx;
						color: #333333;
						line-height: 38rpx;
						margin-left: calc(100% - 590rpx);
					}

					&:last-child::after {
						display: none;
					}

					&::after {
						content: "";
						width: 2rpx;
						height: 60%;
						background-color: #84a4ff;
						position: absolute;
						left: 40rpx;
						top: 88rpx;
					}

					&.shz {
						.child {
							.fl {
								.grow .tip {
									color: #ff774e;
								}
							}
						}
					}

					&.ybh {
						.child {
							.fl {
								.grow .tip {
									color: #ff3a30;
								}
							}
						}
					}

					.child {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.time {
							display: block;
							font-size: 27rpx;
							color: #999999;
						}

						.fl {
							display: flex;

							.pic {
								width: 81rpx;
								position: relative;
								border-radius: 10rpx;
								flex: none;

								.i {
									width: 36rpx;
									position: absolute;
									right: -6rpx;
									bottom: -6rpx;
								}

								.p {
									width: 100%;
								}
							}

							.grow {
								overflow: hidden;
								margin-left: 17rpx;

								.name {
									display: block;
									font-size: 30rpx;
									color: #000000;
									margin-bottom: 10rpx;
									.nodeDesc {
										margin-left: 10rpx;
										font-size: 28rpx;
										color: #999 !important;
									}
								}

								.tip {
									display: block;
									font-size: 27rpx;
									color: #0dba1e;
								}
							}
						}
					}
				}
			}
		}
	}

	.userinfo {
		overflow: hidden;
		width: 100%;
		padding: 34rpx 32rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.tip {
			display: inline-flex;
			align-items: center;
			height: 31rpx;
			font-size: 23rpx;
			color: #4776ff;
			padding: 0 10rpx;
			margin-left: 10rpx;
			background-color: #ecf1ff;
		}
		.ywc {
			background-color: #eafff2;
			color: #0dba1e;
		}

		.ycx {
			background-color: #fff1ed;
			color: #ff774e;
		}

		.ybh {
			background-color: #ffebea;
			color: #ff3a30;
		}

		.fl {
			display: flex;
			align-items: center;

			image {
				width: 95rpx;
				border-radius: 10rpx;
				height: 95rpx;
			}

			view {
				overflow: hidden;
				margin-left: 22rpx;

				.name {
					display: block;
					font-size: 34rpx;
					font-weight: bold;
					color: #000000;
					margin-bottom: 10rpx;
				}

				.des {
					display: block;
					font-size: 29rpx;
					color: #666666;
				}
			}
		}
	}
}

.popup {
	padding: 32rpx 32rpx;
	.title {
		font-size: 32rpx;
		font-weight: 700;
		line-height: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.attachment-image {
		margin-top: 20rpx;
		display: felx;
		flex-wrap: wrap;

		.image {
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			border: 2px solid #f5f5f5;
			width: 130rpx;
			height: 130rpx;
		}
	}
	.attachment-file {
		// margin-top: 20rpx;
		.file {
			background-color: #f5f5f5;
			border-radius: 10rpx;
			padding-left: 10rpx;
		}
	}
	.dom {
		padding: 20rpx 0;
		.title {
			font-size: 28rpx;
		}
		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 0 10rpx 30rpx;
			text-align: center;
			border-bottom: 1px solid #eee;
			&:first-child {
				border-top: 1px solid #eee;
			}
		}
	}
	.footer {
		display: flex;
		gap: 20rpx;
		color: #fff;
		margin-top: 40rpx;
		line-height: 2.5;
		.cancel {
			text-align: center;
			flex: 1;
			border-radius: 6rpx;
			padding: 5rpx 15rpx;
			background-color: #9ac0e8;
		}
		.confirm {
			text-align: center;
			flex: 1;
			border-radius: 6rpx;
			padding: 5rpx 15rpx;
			background-color: #4776ff;
		}
	}
}

.otherBtns {
	background-color: #fff;
	border-radius: 15rpx 15rpx 0 0;
	padding: 20rpx;
	padding-top: 40rpx;
	padding-bottom: 40rpx;
	display: flex;
	justify-content: flex-start;
	.btn {
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
		border: none;
		margin-right: 20rpx;
	}
	.weipai {
		background-color: #4776ff;
		color: #fff;
	}
}
</style>
